<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script
	src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>

</head>
<body>

	<div data-role="page" id="todo">

		<div data-role="header">
			<h1>Todo Twist</h1>
		</div>
		<!-- /header -->

		<div data-role="content">
			<p>Twist...</p>
			<a href="#home">Enter</a>
		</div>
		<!-- /content -->

	</div>
	<!-- /page -->

	<div data-role="page" id="home">
		<div data-role="header">
			<h1>Todo Twist</h1>
		</div>
		<!-- /header -->

		<div data-role="content">

			<!-- /content -->


			<ul data-role="listview" data-inset="true" data-filter="false">
				<li><a href="#event">Add todo</a></li>
				<li><a href="#event">events & Meetings</a></li>
				<li><a href="#">Preferences</a></li>
				<li><a href="#">Help</a></li>
				<li><a href="#">donate</a></li>
			</ul>

		</div>
	</div>
	<!-- /page -->
	<div data-role="page" id="event">

		<div data-role="header">
			<h1>Todo Twist</h1>
		</div>
		<!-- /header -->

		<div data-role="content">
			<p>Twist...</p>
			
			<div data-role="fieldcontain">
				<label for="Event">Event Title:</label> <input type="text"
					name="name" id="name" value="" />
			</div>
			<div data-role="fieldcontain">
				<label for="Event">Event Title:</label> <input type="text"
					name="name" id="name" value="" />
			</div>


		</div>
		<a href="#home">Enter</a>
	</div>
	<!-- /content -->

	</div>
	<!-- /page -->


</body>
</html>